<template>
	<el-container class="flow_node_container">
		<el-header height="54px" class="flow_node_header">
			<h4>审核流程节点</h4>
			<el-button @click="$router.back()">取消</el-button>
			<el-button type="primary" @click="handleConfirmData()">确定</el-button>
		</el-header>
		<el-container>
			<div class="flow_node_aside" ref="antvNodes"></div>
			<div class="flow_node_body">
				<div ref="antvBody"></div>
			</div>
			<el-form ref="form" size="medium" :model="nodeForm" :rules="nodeRules" class="flow_node_form" v-if="showAttrs">
				<el-row :gutter="16">
					<el-col :span="24">
						<el-form-item label="节点名称" prop="name">
							<el-input v-model="nodeForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="节点宽度" prop="width">
							<el-input v-model="nodeForm.width"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="节点高度" prop="height">
							<el-input v-model="nodeForm.height"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核类型" prop="type">
							<el-input v-model="nodeForm.type"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核角色" prop="type">
							<el-input v-model="nodeForm.type"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核人员" prop="type">
							<el-input v-model="nodeForm.type"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-container>
	</el-container>
</template>

<script>
import initFlowCanvas from './config';
import { getFlowNodeList, addedFlowNode } from '@/api/approval/flowDefinitionNode';
const showPorts = (ports, show) => {
	for (let i = 0, len = ports.length; i < len; i += 1) {
		ports[i].style.visibility = show ? 'visible' : 'hidden';
	}
};
export default {
	data() {
		return {
			graph: null,
			flowData: {},
			showAttrs: false,
			nodeForm: {},
			nodeRules: {}
		};
	},
	computed: {
		flowId() {
			return this.$route.params.id;
		}
	},
	watch: {
		flowId: {
			async handler(id) {
				if (!/^[0-9A-F]{32}$/i.test(id)) {
					this.$router.push('/approval/flow');
				} else {
					this.getFlowNodeData();
				}
			},
			immediate: true
		},
		flowData(data) {
			this.$nextTick(() => {
				this.graph.fromJSON(data);
				// this.graph.centerContent();
			});
		}
	},
	mounted() {
		this.graph = this.initDiagrams();
	},
	methods: {
		initDiagrams() {
			let antvBody = this.$refs['antvBody'];
			let antvNodes = this.$refs['antvNodes'];
			let graph = initFlowCanvas(antvBody, antvNodes);
			graph.on('node:mouseenter', () => {
				this.handleMouseNode(antvBody, true);
			});
			graph.on('node:mouseleave', () => {
				this.handleMouseNode(antvBody, false);
			});
			graph.on('node:added', ({ node }) => {
				let params = { name: node.label };
				params['definitionCode'] = this.flowId;
				params['auditRelation'] = '';
				this.addedFlowNode(params);
				console.log(node.size());
				console.log(node.getPosition());
				console.log(data.index);
			});
			graph.on('node:change:size', ({ current }) => {
				this.nodeForm = { ...this.nodeForm, ...current };
			});
			graph.on('node:selected', ({ cell, node }) => {
				console.log(cell.model);
				this.showAttrs = true;
				this.nodeForm = { name: node.label, ...node.size(), ...node.getPosition() };
			});
			graph.on('node:unselected', (data) => {
				this.showAttrs = false;
				this.handleMouseNode(antvBody, false);
			});
			graph.on('edge:added', ({ cell, edge }) => {
				console.log(cell);
				edge.setLabels({ attrs: { label: { text: '123123' } } });
				console.log(edge);
				// edge.attr({ label: { text: 'text123123' } });
			});
			graph.on('edge:selected', ({ edge }) => {
				edge.attr({ line: { stroke: '#ff0000' } });
			});
			graph.on('edge:unselected', ({ edge }) => {
				edge.attr({ line: { stroke: '#A2B1C3' } });
			});
			graph.on('edge');
			graph.on('node:dblclick', (data) => {
				console.log(data);
			});
			graph.on('node:moved', (data) => {
				console.log(data);
			});
			graph.on('node:contextmenu', (data) => {
				console.log(data);
			});
			return graph;
		},

		//鼠标节点事件
		handleMouseNode(body, flag) {
			let ports = body.querySelectorAll('.x6-port-body');
			ports.forEach((item) => {
				item.style.visibility = flag ? 'visible' : 'hidden';
			});
		},

		handleConfirmData() {
			console.log(this.graph.toJSON());
		},

		//获取流程数据
		async getFlowNodeData() {
			let params = { page: 1, limit: 9999, definitionCode: this.flowId };
			let result = await getFlowNodeList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				let nodes = datas.map((item) => {
					return { label: item.name, shape: 'custom-rect', width: 72, height: 36, x: 100, y: 100 };
				});
				this.flowData = { nodes };
			}
		},

		async addedFlowNode(data) {
			let params = { ...data };
			let result = await addedFlowNode(params).then((res) => res.data);
			console.log(result);
		}
	}
};
</script>

<style lang="scss" scoped>
.flow_node_container::v-deep {
	height: 100%;
	overflow: hidden;
}
.flow_node_header {
	display: flex;
	align-items: center;
	padding: 12px 12px 12px 16px;
	border-bottom: solid 1px #e4e7ed;
	flex-shrink: 0;
	h4 {
		flex: 1;
		font-size: 16px;
	}
	.el-button {
		flex-shrink: 0;
		padding: 6px 10px;
	}
}
.flow_node_aside {
	position: relative;
	width: 200px;
	flex-shrink: 0;
	border-right: solid 1px #e4e7ed;
}
.flow_node_body {
	flex: 1;
	overflow: hidden;
}
.flow_node_form::v-deep {
	width: 200px;
	padding: 16px;
	flex-shrink: 0;
	overflow: hidden;
	transition: width 0.2s linear;
	border-left: solid 1px #e4e7ed;
	.el-form-item__label {
		float: none;
		display: block;
		text-align: left;
		line-height: 1;
		font-weight: bold;
		margin-bottom: 10px;
	}
}
</style>
